<template>
  <div class="flowNode">

    <el-dialog title="节点排序" :visible.sync="dialogs.flowNodeSort" width="30%">
        <FlowNodeSort :fFlowId="flowId" :fList.sync="list" @flush-data="findNode()" v-model="dialogs.flowNodeSort"></FlowNodeSort>
    </el-dialog>

    <el-dialog :title="isChange?'修改节点':'新增节点'" :visible.sync="dialogs.flowNodeAdd" width="30%">
        <FlowNodeAdd :fFlowId="flowId" :isChange.sync='isChange' :fNode.sync="tempNode" @flush-data="findNode()" v-model="dialogs.flowNodeAdd"></FlowNodeAdd>
    </el-dialog>

    <el-dialog title="审核人配置" :visible.sync="dialogs.flowNodeMember" width="60%">
        <FlowNodeMember :fNodeId.sync="tempNodeId"  @flush-data="findNode()" v-model="dialogs.flowNodeMember"></FlowNodeMember>
    </el-dialog>

    <el-row >
      <el-col :span="3">
        <el-button type="primary" @click="dialogs.flowNodeAdd = true;tempNode=null;isChange=false">新增节点</el-button>
      </el-col>
      <el-col :span="3" :offset="0.05">
        <el-button type="primary" @click="dialogs.flowNodeSort = true;">节点排序</el-button>
      </el-col>
      <el-col :span="3" :offset="0.05">
        <el-button type="primary" @click="$router.push('flowIndex')">返回</el-button>
      </el-col>
    </el-row>
    <br />
    <br />
    <el-row>
      <el-col>
        <el-table :data="list" :border="true">
          <el-table-column fixed prop="sort" label="序号" width="50" align="center"></el-table-column>
          <el-table-column prop="name" label="节点名" align="center"></el-table-column>
          <el-table-column prop="typeName" label="提交类型" align="center"></el-table-column>
          <el-table-column prop="backTypeName" label="退回类型" align="center"></el-table-column>
          <el-table-column prop="remark" label="备注" align="center"></el-table-column>
          <el-table-column label="操作" align="center" width="250">
            <template slot-scope="scope">
              <el-button type="danger"  @click="deleteNode(scope.row.id)" icon="el-icon-delete" size="mini" circle></el-button>
              <el-button type="primary" @click="dialogs.flowNodeAdd = true;tempNode = scope.row;isChange=true"  icon="el-icon-edit" size="mini" circle></el-button>
              <el-button type="primary" @click="dialogs.flowNodeMember = true;tempNodeId = scope.row.id" size="mini" >审核人配置</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import FlowNodeSort from './node-sort'
import FlowNodeAdd from './node-add'
import FlowNodeMember from './node-member'
import qs from 'qs';

export default {
  name: "FlowNode"
  ,components:{FlowNodeSort,FlowNodeAdd,FlowNodeMember}
  ,data() {
    return {
      dialogs:{
        flowNodeSort:false
        ,flowNodeAdd:false
        ,flowNodeMember:false
      }
      ,total:0
      ,list: []
      ,tempNode:null
      ,tempNodeId:null
      ,isChange:false
      ,flowId:null
    };
  }
  ,created(){
    if(this.$route.params.flowId === undefined || this.$route.params.flowId === null){
      this.$message.error("错误访问");
      this.$router.push("flowIndex");
    }else{
      this.flowId = this.$route.params.flowId;
      this.findNode();
    }
  }
  ,methods:{
    findNode(){
      //调用服务
      var that = this;
      this.$axios
        .get("node/findAllByFlowId", {
          params: {'flowId':this.flowId}
        })
        .then(res => {
          let data = res.data;
          if (data.code === 0) {
            this.list = data.data;
          } else {
            this.$message.error(data.msg);
          }
        })
        .catch(function(error) {
          console.log("axios请求异常:" + error);
          that.$message.error("网路请求异常");
        });
    },
    deleteNode(id){
      //调用服务
      var that = this;
      this.$axios
        .get("node/delete", {
          params: {'id':id}
        })
        .then(res => {
          let data = res.data;
          if (data.code === 0) {
            this.$message({ message: data.msg, type: 'success'});
            this.findNode();
          } else {
            this.$message.error(data.msg);
          }
        })
        .catch(function(error) {
          console.log("axios请求异常:" + error);
          that.$message.error("网路请求异常");
        });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>
